<!--
 * @Descripttion: 文件导入
 * @version: 1.0
 * @Author: sakuya
 * @Date: 2022年5月24日11:30:03
 * @LastEditors:
 * @LastEditTime:
-->

<template>
  <slot :open="open">
    <el-button type="primary" plain @click="open">导入</el-button>
  </slot>
  <el-dialog v-model="dialog" title="导入" :width="550" :close-on-click-modal="false" append-to-body destroy-on-close>
    <el-progress v-if="loading" :text-inside="true" :stroke-width="20" :percentage="percentage" style="margin-bottom: 15px" />
    <div v-loading="loading">
      <el-upload ref="uploader" drag :accept="accept" :maxSize="maxSize" :limit="1" :data="data" :show-file-list="false" :http-request="request" :before-upload="before" :on-progress="progress" :on-success="success" :on-error="error">
        <slot name="uploader">
          <el-icon class="el-icon--upload"><el-icon-upload-filled /></el-icon>
          <div class="el-upload__text">将文件拖到此处或 <em>点击选择文件上传</em></div>
        </slot>
        <template #tip>
          <div class="el-upload__tip">
            <template v-if="tip">{{ tip }}</template>
            <template v-else>请上传小于或等于 {{ maxSize }}M 的 {{ accept }} 格式文件</template>
            <p v-if="templateUrl" style="margin-top: 7px">
              <el-link :href="templateUrl" target="_blank" type="primary" :underline="false">下载导入模板</el-link>
            </p>
          </div>
        </template>
      </el-upload>
      <el-form v-if="$slots.form" inline label-width="100px" label-position="left" style="margin-top: 18px">
        <slot name="form" :formData="formData"></slot>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
export default {
  emits: ['success'],
  props: {
    apiObj: { type: Object, default: () => {} },
    data: { type: Object, default: () => {} },
    accept: { type: String, default: '.xls, .xlsx' },
    maxSize: { type: Number, default: 10 },
    tip: { type: String, default: '' },
    templateUrl: { type: String, default: '' },
  },
  data() {
    return {
      dialog: false,
      loading: false,
      percentage: 0,
      formData: {},
    }
  },
  mounted() {},
  methods: {
    open() {
      this.dialog = true
      this.formData = {}
    },
    close() {
      this.dialog = false
    },
    before(file) {
      const maxSize = file.size / 1024 / 1024 < this.maxSize
      if (!maxSize) {
        this.$message.warning(`上传文件大小不能超过 ${this.maxSize}MB!`)
        return false
      }
      this.loading = true
    },
    progress(e) {
      this.percentage = e.percent
    },
    success(res, file) {
      this.$refs.uploader.handleRemove(file)
      this.$refs.uploader.clearFiles()
      this.loading = false
      this.percentage = 0
      this.$emit('success', res, this.close)
    },
    error(err) {
      this.loading = false
      this.percentage = 0
      this.$notify.error({
        title: '上传文件未成功',
        message: err,
      })
    },
    request(param) {
      Object.assign(param.data, this.formData)
      const data = new FormData()
      data.append(param.filename, param.file)
      for (const key in param.data) {
        data.append(key, param.data[key])
      }
      this.apiObj
        .post(data, {
          onUploadProgress: (e) => {
            const complete = parseInt(((e.loaded / e.total) * 100) | 0, 10)
            param.onProgress({ percent: complete })
          },
        })
        .then((res) => {
          param.onSuccess(res)
        })
        .catch((err) => {
          param.onError(err)
        })
    },
  },
}
</script>

<style></style>
